import * as React from 'react'
import { NavBar, Item, Button } from 'components'
import { formatPriceStr, showPhone } from '../../methods'
import './MySoldListDetail.less'
import { post } from '../../../../utils'

export default class MySoldListDetail extends React.Component<any, any> {

    public state = {
        data: {
            buy_amount: '',
            amount: '',
            bean_order: [],
            status: 0
        }
    }
    public type: string = 'getData'
    public componentDidMount () {
        this.getData()
    }
    public render(): JSX.Element {
        const { data } = this.state
        return (
            <div className="mySoldListDetail">
                <NavBar
                    title={<div style={{color: '#222', fontSize: '0.97rem'}}>恒豆出售详情</div>}
                    fixed={true}
                />
                <div className="mySoldListDetail_top">
                    <div className="mySoldListDetail_top_centent">
                        <img className="mySoldListDetail_top_img" src={require('../../../../assets/mySoldListDetail_bg.png')} />
                        <div className="mySoldListDetail_top_textCentent">
                            <div className="mySoldListDetail_top_textCentent_title">剩余恒豆数</div>
                            <div className="mySoldListDetail_top_textCentent_balance DINPro">{data.buy_amount && formatPriceStr(data.buy_amount.toString())}</div>
                            <div className="mySoldListDetail_top_textCentent_InfoWrap mySoldListDetail_top_textCentent_balance">
                                <div>
                                    <div>总恒豆数</div>
                                    <div className="DINPro" style={{fontSize: '0.97rem'}}>{data.amount && formatPriceStr(data.amount.toString())}</div>
                                </div>
                                <div>
                                    <div>已出售恒豆数</div>
                                    <div className="DINPro" style={{fontSize: '0.97rem'}}>
                                        {data.buy_amount && data.amount && 
                                            formatPriceStr((parseInt(data.amount, 10) - parseInt(data.buy_amount, 10)).toString())}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="mySoldListDetail_list">
                    <div className="mySoldListDetail_list_title">
                        出售信息
                    </div>
                    <div className={`mySoldListDetail_list_record ${!parseInt(data.buy_amount, 10) && 'pdb'}`}>
                        {
                            (data.bean_order.length === 0) 
                            ? <div className="mySoldListDetail_list_noticeInfo">当前暂未有人购买</div>
                            : null
                        }                   
                        {
                            data.bean_order.map((item: any, index: number) => {
                                return (
                                    <Item 
                                        key={index}
                                        className="mySoldListDetail_list_record_item"
                                        title={<div className="mySoldListDetail_list_record_item_title">
                                            <div>{showPhone(item.shop_user_name)}</div>
                                            <div>剩余恒豆：{data.buy_amount && formatPriceStr((data.buy_amount).toString())}</div>
                                        </div>} 
                                        value={<div className="mySoldListDetail_list_record_item_value">
                                            <div>{item.create_time}</div>
                                            <div>{-item.gmprice} 恒豆</div>
                                        </div>} 
                                    />
                                )
                            })
                        }
                    </div>
                </div>
                {
                    (data.status !== 2) &&
                        <div className="mySoldListDetail_operation">
                            <Button className="mySoldListDetail_operation_btn" disabled={data.status === 3} onClick={this.handleStopSold}>{(data.status === 3) ? '已取消出售' : '停止出售'}</Button>
                        </div>
                }
            </div>
        )
    }
    private getData = () => {
        const { userInfo } = this.props
        post('beanapi/beanUserReleaseShow', {
            userId: userInfo.id,
            id: this.props.match.params.id
        }).then((data: any) => {
            this.setState({
                data,
            })
        })
    }
    private handleStopSold = () => {
        const { userInfo } = this.props
        post('beanapi/beanReleaseCancel', {
            userId: userInfo.id,
            id: this.props.match.params.id
        }).then((data: any) => {
            this.getData()
        })
    }
}